<template>
  <div>
    <div class="footerBanner">
      <div v-if="ad" class="ad" v-html="ad"></div>
      <img :src="imgSrc" alt="">
    </div>
    <div id="tabbar">
      <tabbar>
        <tabbar-item link="/list">
          <!--<img slot="icon" src="../assets/demo/icon_nav_button.png">-->
          <span slot="label"> {{$t('index.list')}}</span>
        </tabbar-item>

        <tabbar-item link="/message">

          <span slot="label">{{$t('index.apply')}}</span>
        </tabbar-item>
        <tabbar-item @click.native="toggle" id="more">

          <span slot="label">{{$t('myfooter.more')}}</span>
        </tabbar-item>

        <transition name="fade">
          <div class="list" v-show="show">
            <ul>
              <li>
                <a :href='href'>{{$t('myfooter.website')}}</a>
              </li>
              <li>
                <a :href='tel'>{{$t('myfooter.kftel')}}</a>
              </li>
            </ul>
          </div>
        </transition>

      </tabbar>
    </div>
  </div>

</template>

<script type="text/ecmascript-6">
/* eslint-disable*/
import { Tabbar, TabbarItem, Group, Cell } from "vux";
import Bus from "@/common/js/bus.js";

import { raceShow } from "@/api/raceshow.js";
import { indexedDB } from "@/api/indexedDB.js";

export default {
  props: ["page"],
  data() {
    return {
      show: false,
      imgSrc: "",
      ad: "",
      tel: "",
      href: ""
    };
  },
  created() {
    

    console.log(this.page.raceid);
    this.raceid = this.page.raceid;
    let _this = this;

    raceShow(`${window.host}race/show`, {
      raceid: this.raceid
    }).then(response => {
      if (response.data.code == 200) {
        _this.ad = response.data.data.ad;
        _this.imgSrc = response.data.data.footer;
        _this.tel = "tel:" + response.data.data.tel;

        if (response.data.data.homepage === "//tsmls.ihuipao.com") {
          response.data.data.homepage = "//www.tsmls.cn/";
        }
        _this.href = response.data.data.homepage;
        let data = response.data.data;
        indexedDB("raceInfo", "set", this.RACEID, data, function() {});
      }
    });

    indexedDB('raceInfo', 'get', this.RACEID, '', function (a) {
      if (!a) {
        raceShow(`${window.host}race/show`, {
          raceid: this.RACEID
        }).then(response => {
          if (response.data.code == 200) {
            _this.ad = response.data.data.ad
            _this.imgSrc = response.data.data.footer
            _this.tel = 'tel:'+response.data.data.tel

            if(response.data.data.homepage==='//tsmls.ihuipao.com'){
              response.data.data.homepage='//www.tsmls.cn/'
            }
            _this.href=response.data.data.homepage
            let data = response.data.data
            indexedDB('raceInfo', 'set', this.RACEID, data, function () {
            });
          }
        });
      } else {
         /* console.log(a)*/
        _this.ad = a.ad
        _this.imgSrc = a.footer
        _this.tel ='tel:'+a.tel
      }
    }.bind(this));
  },
  mounted() {
    Bus.$on("close", data => {
      this.show = false;
    });
  },
  methods: {
    toggle() {
      this.show = !this.show;
    }
  },
  components: {
    Tabbar,
    TabbarItem,
    Group,
    Cell
  }
};
</script>


<style lang="less" rel="stylesheet/less">
#tabbar {
  .weui-tabbar {
    max-width: 850px;
  }
}

.footerBanner img {
  max-width: 850px;
  width: 100vw;
}

#tabbar .list {
  background: #f7f7fa;
  position: absolute;
  right: 0;
  width: 33.33%;
  text-align: center;
  bottom: 80px;
}

#tabbar .list li {
  padding: 10px;
}

#tabbar .list li a {
  color: #999;
}

#tabbar .list:after {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #f7f7fa;
  display: block;
  content: "";
  text-align: center;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
}

ul,
li {
  list-style: none;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */
 {
  opacity: 0;
}

</style>
